
<style type="text/css">
th b { color: red; font-weight: normal; padding-right: 2px;}
td span { padding-left: 5px; color: #808080; }

.left_part { float: left; width: 350px; padding-top: 10px; }
.left_part p { width:250px; margin: 0 auto; text-align: left; padding: 10px; background-color: #f7f7f7; }
.right_part { width: 550px; }

#regwin a { color:#555; text-decoration: underline; background-color: transparent;}
#regwin a:hover { color:red; text-decoration: underline; background-color: transparent;}
</style>

<%= form_for(@user) do |f| %>
<div id="main">

<div class="left_part">



<div class="line1"></div><br/>

<script type="text/javascript">
/*250*250，创建于2013-3-19*/
var cpro_id = "u1238877";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>

</div>

<div class="right_part">

	<h3>注册新用户</h3>
	
	<div style="text-align:center">
	<% if @user.errors.any? %>
	    <div id="error_explanation">
	      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>

	      <ul>
	      <% @user.errors.full_messages.each do |msg| %>
	        <li><%= msg %></li>
	      <% end %>
	      </ul>
	    </div>
	<% end %>
	</div>

	<table align="center" id="regwin">
	<tr>
		<th><b>*</b> 用户名称：</th>
		<td><%= f.text_field :name, :class=>'w120' %>
			<span>该名称用于登陆，不能少于4个字符</span></td>
	</tr>
	<tr>
		<th><b>*</b> 登陆密码：</th>
		<td><%= f.password_field :pass, :class=>'w120' %>
			<span>不能少于6个字符</span>
		</td>
	</tr>
	<tr>
		<th><b>*</b> 密码确认：</th>
		<td><%= f.password_field :pass, :class=>'w120', :id=>'pass2', :name=>'pass2' %>
			<span>请重复一次刚才输入的密码</span>
		</td>
	</tr>
	<tr>
		<td colspan="2" align="center">
			<br/><span class="label label-info">为了识别您不是一个机器人，请回答下面的问题：</span><br/>&nbsp;
			<br/><b style="color:red;">*</b> 您幸福吗：<input type="text" class="w80" name="happyma" /> &nbsp;
				<span>您可以输入：<a href="javascript:void(happy(1));">幸福</a> 或者 <a href="javascript:void(happy(0));">不幸福</a></span>
		</td>
	</tr>
	<tr>
		<td colspan="2" align="center">
			<br/><span class="label label-important">以下是选填项，填写将有助于找回密码：</span><br/>&nbsp;
		</td>
	</tr>
	<tr>
		<th>密码问题：</th>
		<td><%= f.text_field :question, :class=>'w200' %></td>
	</tr>
	<tr>
		<th>答案：</th>
		<td><%= f.text_field :answer, :class=>'w80' %>
			<span>输入要简洁，并且请您牢记答案，用于找回密码</span>
		</td>
	</tr>
	<tr>
		<th>电子邮箱：</th>
		<td><%= f.text_field :email, :class=>'w200' %>
			<span>用于接收注册信息，以及找回密码</span>
		</td>
	</tr>
	<tr>
		<th>手机：</th>
		<td><%= f.text_field :mobile, :class=>'w120' %>
			<span>如果您希望通过手机找回密码，请正确输入</span>
		</td>
	</tr>
	<tr>
		<td colspan="2" align="center">
		</td>
	</tr>
	<tr>
		<td colspan="2" align="center"><br/>
			<%= f.submit '注册用户', :class=>'btn btn-primary btn-large' %> &nbsp;
			<%= f.button '重新填写', :class=>'btn btn-large', :onclick=>'reset(); return false;' %>
		<td>
	</tr>
	</table>
</div>
<% end %>

</div>


<script type="text/javascript">
document.domain = 'ttbiji.com';
$(document).ready(function(){
	$('input[type="submit"]').click(function(){
		var p1 = $('input[type="password"]:eq(0)').val();
		var p2 = $('input[type="password"]:eq(1)').val();
		if(p1.length > 0) {
			if(p1 != p2) {
				alert('二次密码输入不一致 -_-!');
				$('input[type="password"]:eq(1)').select();
				return false;	
			}
		}

		// 机器人识别
		if(!checkHappy()) {
			alert('请正确回答问题后再注册');
			return false;
		}

		return true;
	});
});

// 检查问题是否有效输入
function checkHappy() {
	var s = $('[name=happyma]').val();
	return s.indexOf('幸福') != -1;
}

function happy(val) {
	$('[name=happyma]').val(val == 1 ? '幸福' : '不幸福');
}
</script>


